<template>
  <a-modal
    :visible="visible"
    title="创建模版"
    @cancel="cancel"
    @ok="submitData"
  >
    <template #title> 创建模版 </template>
    <div class="content">
      <div v-if="step === 1" class="step-one-wrap">
        <a-radio-group v-model="templateOrigin">
          <a-radio value="blank" style="width: 100%">创建空白项目模版</a-radio>
          <a-radio value="project" style="margin-top: 8px"
            >从现有项目创建模版</a-radio
          >
          <div style="margin-left: 28px"
            >选定项目的某些方面将不会复制到模版</div
          >
        </a-radio-group>
      </div>
      <a-form
        v-else
        :model="formData"
        label-align="left"
        :rules="rules"
        ref="formRef"
      >
        <a-row :gutter="12">
          <a-col :span="24">
            <a-form-item
              field="name"
              label="模版名称"
              label-col-flex="90px"
              :validate-trigger="['change', 'input']"
            >
              <a-input v-model="formData.name" placeholder="请输入名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :span="24">
            <a-form-item
              v-if="step === 3"
              field="protemId"
              label="项目"
              label-col-flex="90px"
            >
              <a-select v-model="formData.protemId" placeholder="请选择项目">
                <a-option
                  v-for="template in projectList"
                  :key="template.id + template.name"
                  :value="template.id"
                  :label="template.name"
                ></a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <template #footer>
      <div class="footer">
        <a-button v-if="step === 1" class="footer-btn" @click="cancel"
          >取消</a-button
        >
        <a-button
          v-if="step === 1"
          class="footer-btn"
          type="primary"
          @click="nextStep"
          >下一步</a-button
        >
        <a-button v-if="step !== 1" class="footer-btn" @click="step = 1"
          >后退</a-button
        >
        <a-button
          v-if="step !== 1"
          class="footer-btn"
          type="primary"
          @click="submitData"
          >创建模版</a-button
        >
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineEmits, defineProps, ref, watch } from 'vue';
  import {
    createProject,
    getProjectList,
    projectItem,
    ProjectListParams,
  } from '@/api/project';
  import { Message } from '@arco-design/web-vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });
  const templateOrigin = ref('blank');
  const step = ref(1);

  const emits = defineEmits(['update:visible', 'submit']);

  const formRef = ref<FormInstance>();
  const rules = ref({
    name: [
      {
        required: true,
        message: '请输入名称',
      },
    ],
    protemId: [
      {
        required: true,
        message: '请选择项目',
      },
    ],
  });

  const projectList = ref([]);
  const getList = () => {
    const params: ProjectListParams = {
      pageNo: 1,
      pageSize: 100000,
      projectType: 0,
    };
    getProjectList(params).then((res: any) => {
      if (res.code === 8000000) {
        projectList.value = res.data?.list || [];
      }
    });
  };
  const formData = ref({
    name: '',
    protemId: '',
  });
  const cancel = () => {
    emits('update:visible', false);
  };
  const submitData = async () => {
    const params = {
      isTemplate: 1,
      name: formData.value.name,
    };
    if (templateOrigin.value === 'project') {
      params.protemId = formData.value.protemId;
    }
    const result = await formRef.value?.validate();
    if (
      !params.name ||
      (templateOrigin.value === 'project' && !params.protemId)
    ) {
      Message.error('请输入完整的模版信息！');
    } else {
      createProject(params as unknown as projectItem).then((res: any) => {
        if (res.code === 8000000) {
          Message.success('创建成功！');
          cancel();
          emits('submit', true);
        }
      });
    }
  };
  const nextStep = () => {
    if (templateOrigin.value === 'blank') {
      step.value = 2;
    } else if (templateOrigin.value === 'project') {
      step.value = 3;
    }
  };
  const init = () => {
    templateOrigin.value = 'blank';
    formData.value = {
      name: '',
      protemId: '',
    };
    formRef.value?.clearValidate();
    getList();
  };
  watch(
    () => props.visible,
    (val, oldValue) => {
      if (val) {
        init();
      }
    }
  );
</script>

<style scoped lang="less">
  .footer-btn {
    margin-left: 8px;
  }
</style>
